<template>
  <div class="container">
    <!-- 酒店搜索列表 -->
    <div class="list-filter">
      <el-row type="flex" style="margin-left:-20px;margin-right:-20px;">
        <!-- 滑动条 -->
        <el-col
          :span="6"
          style="padding-left:20px;padding-right:20px;"
          class="filter-col"
        >
          <el-row class="filter-title" type="flex">
            <el-col :span="24">价格</el-col>
            <el-col class="ta-r" :span="24">0-{{ price_Filter }}</el-col>
          </el-row>
          <el-row>
            <div class="block">
              <el-slider
                v-model="value"
                :min="0"
                :max="2000"
                @change="sliderChangePrice"
              ></el-slider>
            </div>
          </el-row>
        </el-col>

        <!-- 星级 -->
        <el-col
          :span="5"
          style="padding-left:20px;padding-right:20px;"
          class="filter-col"
        >
          <el-row class="filter-title">
            <el-col :span="24">住宿等级</el-col>
          </el-row>
          <el-row class="filter-wrapper">
            <el-dropdown class="filter-dropdown">
              <span class="el-dropdown-link">
                <span class="dropdown-link-text" v-if="!model.hotelLevel.length"
                  >不限</span
                >
                <span
                  class="dropdown-link-text"
                  v-else-if="model.hotelLevel.length == 1"
                >
                  {{ model.hotelLevel[0] }}星
                </span>
                <span class="dropdown-link-text" v-else>
                  已选{{ model.hotelLevel.length }}项
                </span>
                <i class="el-icon-arrow-down el-icon--right"></i>
              </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item
                  v-for="(item, index) in options.levels"
                  :key="index"
                  @click.native="handleHotelLevel(item.level)"
                >
                  <i
                    class="iconfont iconcircle "
                    v-if="model.hotelLevel.indexOf(item.level) == -1"
                  ></i>
                  <i class="iconfont iconright-1" v-else></i>
                  <div class="dropdown-menu-text">
                    {{ item.name }}
                  </div>
                </el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </el-row>
        </el-col>

        <!-- 住宿类型 -->
        <el-col
          :span="5"
          style="padding-left:20px;padding-right:20px;"
          class="filter-col"
        >
          <el-row class="filter-title">
            <el-col :span="24">住宿类型</el-col>
          </el-row>
          <el-row class="filter-wrapper">
            <el-dropdown class="filter-dropdown">
              <span class="el-dropdown-link">
                <span class="dropdown-link-text" v-if="!model.hotelType.length"
                  >不限</span
                >
                <span
                  class="dropdown-link-text"
                  v-else-if="JSON.parse(typeicos).length == 1"
                >
                  {{ options.types[model.hotelType - 1].name }}
                </span>
                <span class="dropdown-link-text" v-else>
                  已选{{ JSON.parse(typeicos).length }}项
                </span>
                <i class="el-icon-arrow-down el-icon--right"></i>
              </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item
                  @click.native="handleHotelType(item.id)"
                  v-for="(item, index) in options.types"
                  :key="index"
                >
                  <i
                    class="iconfont iconcircle "
                    v-if="typeicos.indexOf(JSON.stringify(item.id)) == -1"
                  ></i>
                  <i class="iconfont iconright-1" v-else></i>

                  <div class="dropdown-menu-text">{{ item.name }}</div>
                </el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </el-row>
        </el-col>

        <!-- 酒店设施 -->
        <el-col
          :span="5"
          style="padding-left:20px;padding-right:20px;"
          class="filter-col"
        >
          <el-row class="filter-title">
            <el-col :span="24">酒店设施</el-col>
          </el-row>
          <el-row class="filter-wrapper">
            <el-dropdown class="filter-dropdown">
              <span class="el-dropdown-link">
                <span class="dropdown-link-text" v-if="!model.hotelAsset.length"
                  >不限</span
                >
                <span
                  class="dropdown-link-text"
                  v-else-if="JSON.parse(asseticos).length == 1"
                  >{{ options.assets[model.hotelAsset - 1].name }}</span
                >
                <span class="dropdown-link-text" v-else
                  >已选{{ JSON.parse(asseticos).length }}项</span
                >
                <i class="el-icon-arrow-down el-icon--right"></i>
              </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item
                  @click.native="handleHotelAsset(item.id)"
                  v-for="(item, index) in options.assets"
                  :key="index"
                >
                  <i
                    class="iconfont iconcircle "
                    v-if="asseticos.indexOf(JSON.stringify(item.assets)) == -1"
                  ></i>
                  <i class="iconfont iconright-1" v-else></i>
                  <div class="dropdown-menu-text">{{ item.name }}</div>
                </el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </el-row>
        </el-col>

        <!-- 酒店品牌 -->
        <el-col
          :span="5"
          style="padding-left:20px;padding-right:20px;"
          class="filter-col"
        >
          <el-row class="filter-title">
            <el-col :span="24">酒店品牌</el-col>
          </el-row>
          <el-row class="filter-wrapper">
            <el-dropdown class="filter-dropdown">
              <span class="el-dropdown-link">
                <span class="dropdown-link-text" v-if="!model.hotelBrand.length"
                  >不限</span
                >
                <span
                  class="dropdown-link-text"
                  v-else-if="JSON.parse(brandicos).length == 1"
                  >{{ options.brands[model.hotelBrand - 4].name }}</span
                >
                <span class="dropdown-link-text" v-else
                  >已选{{ JSON.parse(brandicos).length }}项</span
                >
                <i class="el-icon-arrow-down el-icon--right"></i>
              </span>
              <el-dropdown-menu slot="dropdown" class="project-dropdown">
                <el-dropdown-item
                  @click.native="handleHotelBrand(item.id)"
                  v-for="(item, index) in options.brands"
                  :key="index"
                >
                  <i
                    class="iconfont iconcircle"
                    v-if="brandicos.indexOf(JSON.stringify(item.id)) == -1"
                  ></i>
                  <i class="iconfont iconright-1 " v-else></i>
                  <div class="dropdown-menu-text">{{ item.name }}</div>
                </el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </el-row>
        </el-col>

        <el-col
          :span="4"
          style="padding-left:20px;padding-right:20px;"
          class="filter-col"
        >
          <el-row
            type="flex"
            justify="center"
            align="middle"
            style="height:100%;"
          >
            <el-button type="primary" @click="handleRepeal">撤销条件</el-button>
          </el-row>
        </el-col>
      </el-row>
    </div>

    <!-- 搜索结果列表 -->
    <div class="hotel-list" v-if="total">
      <div v-for="item in hotelList" :key="item.id">
        <el-row
          class="hotel-item"
          style="margin-left: -10px; margin-right: -10px;"
        >
          <el-col :span="8" style="padding-left: 10px; padding-right: 10px;">
            <div class="img-wrapper">
              <nuxt-link :to="`/hotel/${item.id}.html`">
                <img
                  :src="item.photos"
                  alt="汉庭(广州金山石化店)"
                  width="320"
                  height="210"
                />
              </nuxt-link>
            </div>
          </el-col>

          <el-col :span="10" style="padding-left: 10px; padding-right: 10px;">
            <h4 class="hotel-cn-name">
              <nuxt-link :to="`/hotel/${item.id}.html`">{{
                item.name
              }}</nuxt-link>
            </h4>

            <div class="hotel-en-name">
              <span>{{ item.alias }} </span>
              <span title="3星级">
                <i class="iconfont iconhuangguan"></i>
                <i class="iconfont iconhuangguan"></i>
                <i class="iconfont iconhuangguan"></i>
              </span>
              <span>{{ item.hoteltype.name }}</span>
            </div>

            <el-row type="flex" style="margin-left: -5px; margin-right: -5px;">
              <el-col :span="10" style="padding-left: 5px; padding-right: 5px;">
                <el-rate
                  v-if="!item.hotellevel"
                  v-model="item.stars"
                  disabled
                  show-score
                  text-color="#ff9900"
                  score-template="{value}分"
                  class="rate-budget"
                >
                </el-rate>
                <el-rate
                  v-else
                  v-model="item.hotellevel.level"
                  disabled
                  show-score
                  text-color="#ff9900"
                  score-template="{value}分"
                  class="rate-budget"
                >
                </el-rate>
              </el-col>

              <el-col :span="7" style="padding-left: 5px; padding-right: 5px;">
                <span class="height-light">{{ item.all_remarks }}</span
                >条评价
              </el-col>
              <el-col :span="7" style="padding-left: 5px; padding-right: 5px;">
                <span class="height-light">{{ item.common_remarks }}</span
                >篇游记
              </el-col>
            </el-row>
            <div class="hotel-summary-row"></div>
            <div class="location-row">
              <i class="iconfont iconlocation"></i>
              位于: {{ item.address }}
            </div>
          </el-col>

          <el-col
            class="price-col"
            :span="6"
            style="padding-left: 10px; padding-right: 10px;"
          >
            <el-table
              ref="singleTable"
              :data="item.products"
              highlight-current-row
              @current-change="handleCurrentChange"
              style="width: 100%"
              class="price-table"
              :show-header="false"
            >
              <el-table-column prop="name" width="110"> </el-table-column>
              <el-table-column width="110" prop="price">
                <template slot-scope="scope">
                  <span class="height-light larger"
                    >￥{{ scope.row.price }}起
                  </span>
                  <i class="el-icon-arrow-right"></i>
                </template>
              </el-table-column>
            </el-table>
          </el-col>
        </el-row>
      </div>
    </div>

    <div class="hotel-list" v-else>
      <div class="no-result">暂无符合条件的酒店</div>
    </div>

    <!-- 分页 -->
    <div class="pagination-box" v-if="total">
      <el-pagination
        prev-text="< 上一页"
        next-text="下一页 >"
        layout="prev, pager, next"
        :total="total"
        @current-change="handleChangePagination"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 滑块初始值
      value: 2000,
      model: {
        // 滑块移动后变化的值
        sliderPrice: 2000,
        // 星级选项
        hotelLevel: [],
        // 类型选项
        hotelType: [],
        // 设施选项
        hotelAsset: [],
        // 品牌选项
        hotelBrand: []
      },

      // 以后将要拼接的url地址
      url: "",

      // 将来这些URL,在监听选择事件变化时,存储到url中
      sliderPriceURL: "",
      hotelURL: {
        hotelLevelURL: "",
        hotelTypeURL: "",
        hotelAssetURL: "",
        hotelBrandURL: ""
      },

      // 酒店搜索
      options: {},

      // 酒店列表
      hotelList: [],

      // 分页的总条数
      total: 0,

      // 酒店参数数据
      hotelData: {
        // 酒店列表获取条数
        _limit: 10,
        // 开始数据（分页）, 一页一般加5
        _start: 0
      }
    };
  },
  computed: {
    // 计算价格区间,动态渲染
    price_Filter() {
      return this.model.sliderPrice;
    },

    //
    typeicos() {
      return JSON.stringify(this.model.hotelType || "");
    },

    asseticos() {
      return JSON.stringify(this.model.hotelAsset || "");
    },

    brandicos() {
      return JSON.stringify(this.model.hotelBrand || "");
    }
  },
  created() {
    this.hotelSearch();
    this.getHotelList();
  },
  methods: {
    // 酒店筛选
    hotelSearch() {
      this.$axios({
        url: "/hotels/options"
      }).then(res => {
        // console.log(res.data);

        this.options = res.data.data;
        // console.log(this.options);
      });
    },
    // 获取酒店列表
    getHotelList() {
      this.$axios({
        url: "/hotels?" + this.url,
        params: {
          city: 197,
          _limit: this.hotelData._limit,
          _start: this.hotelData._start,
          price_lt: this.sliderPriceURL
          // 等级
          // hotellevel: 4
          // hotellevel: 4
          // 类型
          // hoteltype: this.model.hotelType,
          // // 设施
          // hotelasset: this.model.hotelAsset,
          // // 品牌
          // hotelbrand: this.model.hotelBrand
        }
      })
        .then(res => {
          // console.log(res);
          this.hotelList = res.data.data;
          this.total = res.data.total;
          console.log(this.$route);
          console.log(this.model);
          console.log("123", this.hotelList);
        })
        .catch(res => {
          console.log(res);
        });
    },
    // 拖动滑块显示对应价格的酒店
    sliderChangePrice(pri) {
      // console.log(pri)
      this.model.sliderPrice = pri;

      if (this.value === 0) {
        return;
      }
      this.sliderPriceURL = this.value;
      console.log(this.sliderPriceURL);
      this.getHotelList();

      // console.log(this.hotelURL.sliderPriceURL);
    },

    //封装queryString
    // 比如房子星级, 如果没有选中任何星级, 则push一个星级进去, 有的话就要判断,这个星级是否选择过,如果选择过则取消选择, 如果没有选择过,就再push进去
    queryString(arr, data) {
      if (!arr.length) {
        arr.push(data);
      } else {
        arr.indexOf(data) == -1
          ? arr.push(data)
          : arr.splice(arr.indexOf(data), 1);
      }

      return arr;
    },

    // 选择房子星级
    handleHotelLevel(level) {
      this.model.hotelLevel = this.queryString(this.model.hotelLevel, level);

      console.log(this.model.hotelLevel);

      this.hotelURL.hotelLevelURL = this.addStr(
        this.model.hotelLevel,
        "hotellevel_in"
      );
      console.log(this.hotelURL.hotelLevelURL);
      // this.getHotelList();
    },

    // 选择房子类型
    handleHotelType(type) {
      this.model.hotelType = this.queryString(this.model.hotelType, type);

      // console.log(this.model.hotelType);

      this.hotelURL.hotelTypeURL = this.addStr(
        this.model.hotelType,
        "hoteltype_in"
      );
      // console.log(this.hotelURL.hotelTypeURL);
      // this.getHotelList();
    },

    // 选择酒店设施
    handleHotelAsset(asset) {
      this.model.hotelAsset = this.queryString(this.model.hotelAsset, asset);

      this.hotelURL.hotelAssetURL = this.addStr(
        this.model.hotelAsset,
        "hotelasset_in"
      );
    },
    // 选择酒店品牌
    handleHotelBrand(brand) {
      this.model.hotelBrand = this.queryString(this.model.hotelBrand, brand);

      this.hotelURL.hotelBrandURL = this.addStr(
        this.model.hotelBrand,
        "hotelbrand_in"
      );
    },

    addStr(arr, inUrl) {
      let urlStr = "";
      arr.forEach(el => {
        urlStr += "&" + inUrl + "=" + el;
        // console.log(el);
      });
      return urlStr;
    },

    // 撤销条件
    handleRepeal() {
      // 滑块初始值
      (this.value = 2000),
        (this.model = {
          // 滑块移动后变化的值
          sliderPrice: 2000,
          // 星级选项
          hotelLevel: [],
          // 类型选项
          hotelType: [],
          // 设施选项
          hotelAsset: [],
          // 品牌选项
          hotelBrand: []
        });

      (this.hotelURL = {
        sliderPriceURL: "",
        hotelLevelURL: "",
        hotelTypeURL: "",
        hotelAssetURL: "",
        hotelBrandURL: ""
      }),
        this.getHotelList();
    },

    // 分页
    handleChangePagination(page) {
      console.log(page);
      let _start;
      if (page > 1) {
        _start = page * 5 - 5;
      }
      this.hotelData._start = _start;
      console.log(this.hotelData._start);

      this.getHotelList();
    },

    // 点击携程表单跳转
    handleCurrentChange() {
      window.location.href = "https://hotels.ctrip.com/hotel/694679.html";
    }
  },
  watch: {
    // 监听滑块的值,并将值存入url中备用
    value() {
      // console.log(this.hotelURL.sliderPriceURL);
    },
    hotelURL: {
      handler() {
        let url = Object.values(this.hotelURL)
          .toString()
          .replace(/,/g, "");

        this.url = url;
        console.log(this.url);
        this.getHotelList();
      },
      deep: true
    }
  },
  mounted() {}
};
</script>

<style lang="less" scoped>
.container {
  margin-top: 20px;

  .list-filter {
    border: 1px solid #ddd;
    padding: 5px 20px;
    color: #666;

    .filter-col {
      border-right: 1px solid #ddd;
      padding: 5px 0;

      .filter-title {
        font-size: 14px;

        .ta-r {
          text-align: right;
        }
      }

      .filter-wrapper {
        height: 38px;
        display: flex;
        align-items: center;
      }
    }
  }

  .hotel-item {
    padding: 25px 0;
    border-bottom: 1px solid #eee;

    .el-col-8 {
      width: 33.33333%;

      .img-wrapper {
        width: 420px;
      }
    }

    .el-col-10 {
      width: 41.66667%;

      .hotel-cn-name {
        font-weight: 400;
        font-size: x-large;
      }

      .hotel-en-name {
        color: #999;

        .iconhuangguan {
          color: #f90;
        }
      }

      .rate-budget {
        display: inline-block;
      }

      .height-light {
        color: #f90;
      }

      .hotel-summary-row,
      .location-row {
        font-size: 14px;
        color: #666;
      }
    }
  }

  .no-result {
    text-align: center;
    height: 300px;
    margin-top: 20px;
  }
}

.el-row:last-child {
  border: none;
}

.ta-r:last-child {
  border: none;
}

.filter-dropdown {
  position: relative;
  width: 100%;
}

.el-dropdown-link {
  display: flex;
  flex: 1;
  width: 100%;
  cursor: pointer;
}

.dropdown-link-text {
  flex: 1;
  font-size: 13px;
}

.dropdown-menu-text {
  display: inline-block;
  min-width: 100px;
  margin-left: 10px;
}

.project-dropdown {
  //设置高度才能显示出滚动条 !important
  height: 300px;
  overflow: auto;
}
.project-dropdown::-webkit-scrollbar {
  width: 5px;
  height: 5px;
  background-color: #f5f5f5;
}
.project-dropdown::-webkit-scrollbar-track {
  //-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
  border-radius: 10px;
  background-color: #f5f5f5;
}

.height-light {
  color: #f90;
}

.larger {
  font-size: larger;
}

.el-table .cell {
  box-sizing: border-box;
  white-space: normal;
  word-break: break-all;
  line-height: 23px;
}

.pagination-box {
  display: flex;
  justify-content: flex-end;
  padding: 20px 0 40px;
}
</style>
